<template>
  <div>
    <!-- 顶部栏 -->
      <van-nav-bar fixed>
      <template #left>
        <div class="bg"></div>
  </template>
   <template #right>
       <van-button round  icon="search" type="info" @click="$router.push('/search')">搜索</van-button>
  </template>
      </van-nav-bar>
      <!-- tab栏 -->
      <van-tabs v-model="active" @click="tabClick">
  <van-tab v-for="value in cannelList" :key="value.id" :title="value.name">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in articleList" :key="item.art_id" :title="item.title" @click="$router.push({path:'/article',query:{id:item.art_id}})">
    <template #label>
      <van-grid :column-num="item.cover.type">
  <van-grid-item v-for="(val,index) in item.cover.images" :key="index">
    <van-image :src="val" lazy-load/>
  </van-grid-item>
</van-grid>
      <br>
      <span>{{item.aut_name}}</span>&nbsp;&nbsp;
      <span>{{item.comm_count}}评论</span>&nbsp;;&nbsp;
      <span>{{item.pubdate|fromNow}}</span>
  </template>
  </van-cell>
</van-list>
</van-pull-refresh>
  </van-tab>
</van-tabs>
  </div>
</template>

<script>
import {getCannelList,getArticleList} from './home.js'
import * as moment from 'moment';
moment.locale('zh-cn');
export default {
    name:'home',
    data() {
    return {
      active: 0,
        articleList: [],
      loading: false,
      finished: false,
      isLoading: false,
      cannelList:[],
      timestamp:null
    };
  },
  async created() {
    let res = await getCannelList()
    // console.log(res);
    this.cannelList=res.data.data.channels
  },
  methods: {
   async onLoad(){
     if(!this.timestamp){
       this.timestamp=Date.now()
     }
      let res = await getArticleList({
        channel_id:this.cannelList[this.active].id,
        timestamp:this.timestamp
      })
      console.log(res);
  this.timestamp=res.data.data.pre_timestamp
      this.articleList.push(...res.data.data.results)
          this.loading=false
          if(this.articleList.length>=50){

            this.finished=true
          }

    },
    onRefresh(){
      this.finished=false
      this.isLoading=false
      this.articleList=[]
      this.timestamp=false
      this.loading=true
      this.onLoad()
    },
    tabClick(){
      this.finished=false
      this.articleList=[]
      this.timestamp=false
      this.loading=true
      this.onLoad()
    }
  },
  filters:{
    fromNow(value){
      return moment(value).fromNow();
    }
  }
}
</script>

<style lang="less">
.van-nav-bar{
z-index: 2 !important;
  .bg{
    width: 100px;
    height: 30px;
    background: url('~@/assets/logo.png') no-repeat;
    background-size: 100%;
  }
}
.van-nav-bar__right{

  .van-button{
    width: 100px;
    height: 35px;
    background-color: rgba(255,255,255,.2);
    .van-icon{
      color: #fff;
    }
  }
}
.van-tabs{
  .van-tabs__wrap{
    position: fixed;
    /* 结局频道列表不能自动滚动BUG 
    当频道列表数据很多时候会被内容撑开，导致无法自动滚动。给一个宽度即可
     */
    width: 100%;
    top:46px;
    z-index: 10;
  }
  .van-tabs__content{
    margin-top: 90px;
    margin-bottom: 50px;
  }
}
</style>